(function () {
  $.fn.banner = function (ops) {
    var obj = {};
    let {
      item,
      btn = true,
      list = true,
      autoplay = true,
      delayTime = 3000,
      playTime = 1000,
      index = 0,
    } = ops;
    let previndex;

    item
      .eq(index)
      .css({
        left: 0,
      })
      .siblings()
      .css({
        left: -item.eq(0).width(),
      });

    if (btn) {
      $("<button><<<</button>")
        .css({
          position: "absolute",
          width: 40,
          height: 30,
          left: 0,
          top: 50,
          bottom: 50,
          margin: "auto 0",
        })
        .attr("id", "left")
        .appendTo($(item).parent().parent());
      $("<button>>>></button>")
        .css({
          position: "absolute",
          width: 40,
          height: 30,
          right: 0,
          top: 50,
          bottom: 50,
          margin: "auto 0",
        })
        .attr("id", "right")
        .appendTo($(item).parent().parent());

      addEvent(item.parent().parent().find("button"));
    }

    if (list) {
      let str = "";
      $.each(item, (index) => {
        str += `<li></li>`;
      });
      $("<div id='list'><div>")
        .html(`<ul>${str}</ul>`)
        .appendTo(item.parent())
        .css({
          width: item.eq(0).width(),
          position: "absolute",
          left: "50%",
          transform: "translateX(-50%)",
          bottom: 0,
        })
        .children()
        .css({
          display: "flex",
          listStyleType: "none",
          margin: 0,
          padding: 0,
          justifyContent: "center",
        })
        .children()
        .attr({
          class: "listchildren",
        })
        .css({
          textAlign: "center",
        });
      addEvent(item.parent().parent().find("li"));
      defaultStyle(index);
    }

    if (autoplay) {
      autoPlayMode();
      //此处可以用hover
      $(this.children()[0])
        .children()
        .hover(
          function () {
            clearInterval(obj.t);
          },
          function () {
            autoPlayMode();
          }
        );
    }

    function addEvent(ele) {
      let type;
      ele.click(function () {
        if (this.id === "left") {
          previndex = index;
          if (index === 0) {
            index = item.length - 1;
          } else {
            index--;
          }
          type = 1;
          defaultStyle(index);
        }
        if (this.id === "right") {
          previndex = index;
          if (index === item.length - 1) {
            index = 0;
          } else {
            index++;
          }
          type = -1;
          defaultStyle(index);
        }
        if (this.className === "listchildren") {
          if (index === $(this).index()) {
            return
          } else {
            if (index < $(this).index()) {
              type = -1;
            }
            if (index > $(this).index()) {
              type = 1;
            }
            previndex = index;
            index = $(this).index();

            defaultStyle(index);
          }
        }
        //点击后如果有自动播放，让自动播放的计时器清除。重新计时
        if (autoplay) {
          autoPlayMode();
        }
        move(previndex, index, type);
      });
    }

    function move(previndex, index, type) {
      item
        .eq(previndex)
        .css({
          left: 0,
        })
        .stop()
        .animate({
            // left: item.eq(0).width() * type,
            left: item.eq(0).width() * type,
          },
          playTime
        )
        .end()
        .eq(index)
        .css({
          left: -item.eq(0).width() * type,
        })
        .stop()
        .animate({
            left: 0,
          },
          playTime
        );
    }

    function defaultStyle(index) {
      $(item.parent().parent().find("li")[index])
        .css({
          background: "white",
          color: "rgba(0, 0, 0, 0)",
        })
        .siblings()
        .css({
          background: " rgba(0, 0, 0, 0.4)",
          color: "rgba(0, 0, 0, 0)",
        });
    }
    //分装自动播放部分
    function autoPlayMode() {
      //将t绑定在最先声明的obj上。保证只有一个t。不会因为运行多次函数而开启多个计时器
      clearInterval(obj.t);
      obj.t = setInterval(() => {
        previndex = index;
        if (index === item.length - 1) {
          index = 0;
        } else {
          index++;
        }
        move(previndex, index, -1);
        defaultStyle(index);
      }, delayTime);
    }
    window.onresize = function () {
      $(".banner a").eq(index).css({
        left: 0,
      }).siblings().css({
        left: $(".banner a").eq(0).width()
      })
    }

  };

})();